<template>
	<view>
		<view>
			<image :src="apiurl+model.img" style="width: 100%;vertical-align: bottom;"></image>
		</view>
		<view class="info">
			<view>
				<uni-row>
					<uni-col :span="8">
						<view><text class="project-tip">报名活动：</text></view>
					</uni-col>
					<uni-col :span="16">
						<view><text class="project-tip">{{model.title}}</text></view>
					</uni-col>
				</uni-row>
				<view class="hline"></view>
				<uni-row>
					<uni-col :span="8">
						<text class="project-tip">报名费：</text>
					</uni-col>
					<uni-col :span="16">
						<text class="project-tip">{{model.signFee}}元</text>
					</uni-col>
				</uni-row>
				<view class="hline"></view>
				<uni-row>
					<uni-col :span="8">
						<text class="project-tip">活动开始时间：</text>
					</uni-col>
					<uni-col :span="16">
						<text class="project-tip">{{model.beginTime}}</text>
					</uni-col>
				</uni-row>
				<view class="hline"></view>
				<uni-row>
					<uni-col :span="8">
						<text class="project-tip">活动结束时间：</text>
					</uni-col>
					<uni-col :span="16">
						<text class="project-tip">{{model.endTime}}</text>
					</uni-col>
				</uni-row>
				<view class="hline"></view>
				<uni-row>
					<uni-col :span="8">
						<text class="project-tip">活动地点：</text>
					</uni-col>
					<uni-col :span="16">
						<text class="project-tip">{{model.location}}</text>
					</uni-col>
				</uni-row>
			</view>
			
			
		</view>
		<view>
			<img src="../../static/bg_line.png" style="width: 100%;vertical-align: top;height: 8px;">
		</view>
		<view>
			<uni-row>
				<uni-col :span="6">
					<text class="person-tip">姓名</text>
				</uni-col>
				<uni-col :span="18">
					<input name="name" v-model="model.name" class="person-input" value='' placeholder="请输入姓名（必填）"></input>
				</uni-col>
			</uni-row>
			<view class="hline"></view>
			<uni-row>
				<uni-col :span="6">
						<text class="person-tip">手机号</text>
				</uni-col>
				<uni-col :span="18">
					<input name="mobile" v-model="model.mobile" class="person-input" value='' placeholder="请输入手机号（必填）"></input>
				</uni-col>
			</uni-row>
		</view>
		<view>
			<button type="primary" class="confirm-btn" @click="submit">确定</button>
		</view>
		
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				model:{},
				amountDisabled:false,
				apiurl:'',
				activityId:"",
				categoryId:"",
				compnay:'',
				isOpen:false,
				moduleList:[],
				img:{}
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad:function(option){
			
			 this.apiurl = getApp().globalData.staticUrl
		     this.activityId = option.id
			 this.categoryId = option.categoryId
			 // this.$set(this.model,'activityId',option.id)
			 // this.$set(this.model,'activityCategoryId',option.categoryId)
		     uni.setNavigationBarTitle({
		         title:option.title
		     })
			 //加载banner
			 this.$http.get('/temple.appearance/templeAppearanceBanner/api/list', {
				 'location':'activity'
			 }).then((res) => {
			 	var list = res.data.result.records;
				if(list.length>0){
					this.img  = list[0]
				}
			 })
			 this.$http.get('/temple.activity/templeActivity/api/queryById', {
			 	'id':this.activityId,
			 }).then((res) => {
				console.log(res)
				this.model = res.data.result
			 })
			 var that = this
			 uni.login({
			 	success(res) {
			 		if (res.errMsg == 'login:ok') {
			 			that.$http.get('/wechat/getOpenId', {
			 				loading: 'hide',
			 				code: res.code
			 			}).then((ret) => {
			 				console.log(ret)
			 				uni.setStorageSync('session_key', ret.data.result.session_key);
			 				uni.setStorageSync('openid', ret.data.result.openid);
			 			});
			 		} else {
			 			uni.showModal({
			 				content: res.errMsg,
			 				showCancel: false
			 			})
			 		}
			 	}
			 })
			 
		},
		methods: {
			callPhone(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			},
			submit(){
				console.log(this.hasLogin)
				//没有登陆先登陆
				// if(!this.hasLogin){
				// 	this.wxLogin()
				// 	return;
				// }
				if(!this.model.name){
					uni.showToast({
						title: '请输入姓名',
						icon:'error',
						duration: 1000
					})
					return
				}else if(!this.model.mobile){
					uni.showToast({
						title: '请输入正确手机号',
						icon:'error',
						duration: 1000
					})
					return
				}else{
					var userInfo = uni.getStorageSync('userInfo')
					var param = {
						'userId':userInfo.id,
						'payChannel':'weixin',
						'amount':this.model.signFee,
						'activityId':this.model.id,
						'activityCategoryId':this.model.categoryId,
						'name':this.model.name,
						'mobile':this.model.mobile,
						'createBy':userInfo.id
					}
					this.$http.post('/temple.order/templeActivityOrder/api/add', 
						param
					).then((res) => {
						console.log(res)
						let that = this;
						uni.requestPayment({
						    provider: 'wxpay',    //支付类型-固定值
						    timeStamp: res.data.result.timeStamp, // 时间戳（单位：秒）
						    nonceStr: res.data.result.nonceStr, // 随机字符串
						    package: "prepay_id="+res.data.result.package, // 固定值
						    signType: res.data.result.signType, //固定值
						    paySign: res.data.result.paySign, //签名
						    success: function (res) {
						        console.log('success:' + JSON.stringify(res));
						        console.log("支付成功");
								that.goTo('/pages/activity/result?signFee='+that.model.signFee+'&title='+that.model.title+'&name='+that.model.name)
						    },
						    fail: function (err) {
						        console.log('fail:' + JSON.stringify(err));
						        console.log("支付失败");
								uni.showToast({
									title: err,
									icon:'error',
									duration: 1000
								});
						    }
						});
					})
				}
				
			},
			wxLogin() {
				let that = this;
				uni.getUserProfile({
					desc: '请求获取您的昵称、头像。',
					complete: function(infoRes) {
						if (infoRes.errMsg == 'getUserProfile:ok') {
							console.log(infoRes)
							that.$http.get('/wechat/wechatLogin', {
								openId: uni.getStorageSync('openid'),
								parentId: uni.getStorageSync('uid') ? uni.getStorageSync('uid') : 0,
								nickName:encodeURIComponent(infoRes.userInfo.nickName),
								avatarUrl: infoRes.userInfo.avatarUrl,
								sex: infoRes.userInfo.gender,
							}).then((res) => {
								console.log(res)
								if (res.data.code == 200) {
									uni.removeStorageSync('uid');
									uni.setStorageSync("userInfo", res.data.result);
									that.$store.commit('login', res.data.result);
									that.toast("登录成功");
								}
							});
						}
					}
				});
			},
			switchChange(e){
				this.isOpen = e.detail.value
			},
			goTo(url){
				// if (!this.hasLogin) {
				// 	this.wxLogin()
				// }else{
					uni.navigateTo({
						url: url 
					})
				// }
			}
		}
	}
</script>

<style scoped lang='scss'>
	.item{
		height: 40px;
		margin: 5px 0;
	}
	.item-span{
		display: block;
		width: 95%;
		height: 40px;
		line-height: 40px;
		margin: 0 auto;
		border: 1px solid #888;
		border-radius: 5px;
		font-size: 15px;
		color: #888;
		text-align: center;
		word-break: keep-all;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.active{
		    border: 1px solid #FFD700;
		    color: #ff7e00;
	}
	
	.project-tip{
		    margin: 0 10px;
		    color: #888;
		    font-size: 14px;
	}
	.active-tip{
		    padding: 0 10px;
		    color: #ff7e00;
		    font-size: 14px;
		    word-break: break-all;
	}
	.hline{
		width: 100%;
		height: 1px;
		background: #eee;
	}
	.remark{
		isplay: block;
		float: left;
		box-sizing: border-box;
		width: 100%;
		height: 50px;
		padding: 10px;
		background: rgba(255,255,255,0);
		color: #333;
		font-size: 14px;
		resize: none;
	}
	.moneyLayer{
		border-bottom: 1px solid #eee;
	}
	.moneyInput{
		margin: 0 10px;
		    display: block;
		    width: 70%;
		    height: 40px;
		    line-height: 40px;
		    /* margin-left: 10px; */
		    background: rgba(255,255,255,0);
		    color: #333;
		    font-size: 20px;
	}
	.info{
		padding: 10px 0;
		background: url(../../static/bg_slash2.png) no-repeat center center;
		background-size: cover;
	}
	.input{
		height: 50px;
		margin-left: 80px;
	}
	.person-tip{
		box-sizing: border-box;
		height: 50px;
		line-height: 50px;
		padding-left: 10px;
		color: #888;
		font-size: 15px;
		text-align: left;
	}
	.person-input{
		height: 50px;
		line-height: 50px;
		color: #333;
		font-size: 15px;
	}
	.confirm-btn{
		margin: 20px 10px;
	}
</style>
